<template>
  <view
    class="w-375px h-212px cover flex items-start justify-center relative"
    :style="{ backgroundImage: `url(${oss2('panda/detail/pic_box.png')})` }"
  >
    <swiper
      class="w-288px h-222px pic-swiper"
      :indicator-dots="true"
      :current="currentPic"
      indicator-color="#fff"
      indicator-active-color="#1764C2"
      @animationfinish="ImgChange"
    >
      <swiper-item v-for="(url, index) in urls" :index="index" :key="url">
        <image class="w-288px h-182px" :src="url" />
      </swiper-item>
    </swiper>
    <image
      class="absolute w-24px h-24px bottom-23px"
      :src="oss2('panda/detail/FD.png')"
      @click.stop="handlePreviewImage"
    />
    <view class="swiper-control prev" @click.stop="prevPic"></view>
    <view class="swiper-control next" @click.stop="nextPic"></view>
  </view>
</template>

<script setup>
import { oss2 } from "@/utils/utils";
import { defineProps, ref } from "vue";

const props = defineProps({
  urls: {
    type: Array,
    default: () => [],
  },
  name: {
    type: String,
    default: () => "top",
  },
});

const currentPic = ref(0);

const handlePreviewImage = () => {
  uni.previewImage({
    current: currentPic.value,
    urls: props.urls,
  });
  if (props.name === "top") {
    getApp().emdlz(
      "track",
      "event",
      "pandas_campaign_second_page",
      "click",
      `picture1_${props.urls[currentPic.value]}`,
      ""
    );
  } else {
    getApp().emdlz(
      "track",
      "event",
      "pandas_campaign_second_page",
      "click",
      `picture2_${props.urls[currentPic.value]}}`,
      ""
    );
  }
};

const ImgChange = () => {
  if (props.name === "top") {
    getApp().emdlz(
      "track",
      "event",
      "pandas_campaign_second_page",
      "slide",
      `picture1_${props.urls[currentPic.value]}`,
      ""
    );
  } else {
    getApp().emdlz(
      "track",
      "event",
      "pandas_campaign_second_page",
      "slide",
      `picture2_${props.urls[currentPic.value]}`,
      ""
    );
  }
};

const nextPic = () => {
  if (currentPic.value === props.urls.length - 1) return;
  currentPic.value += 1;
  if (props.name === "top") {
    getApp().emdlz(
      "track",
      "event",
      "pandas_campaign_second_page",
      "slide",
      `picture1_${props.urls[currentPic.value]}`,
      ""
    );
  } else {
    getApp().emdlz(
      "track",
      "event",
      "pandas_campaign_second_page",
      "slide",
      `picture2_${props.urls[currentPic.value]}`,
      ""
    );
  }
};

const prevPic = () => {
  if (!currentPic.value) return;
  currentPic.value -= 1;
  if (props.name === "top") {
    getApp().emdlz(
      "track",
      "event",
      "pandas_campaign_second_page",
      "slide",
      `picture1_${props.urls[currentPic.value]}`,
      ""
    );
  } else {
    getApp().emdlz(
      "track",
      "event",
      "pandas_campaign_second_page",
      "slide",
      `picture2_${props.urls[currentPic.value]}`,
      ""
    );
  }
};
</script>

<style lang="less" scoped>
.pic-swiper {
  padding-top: 21rpx;
  swiper-item {
    box-sizing: border-box;
    image {
      display: block;
    }
  }
}
.swiper-control {
  width: 25px;
  height: 120px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 2;
  &.prev {
    left: 20px;
  }
  &.next {
    right: 20px;
  }
}
</style>
